<template>
	<view class="apply_container">
		<view class="apply_form">
			<u--form
				:model="formData"
				:rules="rules"
				labelWidth="200"
				labelPosition="top"
				ref="uForm"
			>
				<u-form-item
					label="姓名"
					prop="name"
					borderBottom
				>
					<u--input
						v-model="formData.name"
						placeholder="请输入您的姓名"
						border="none"
					/>
				</u-form-item>
				
				<u-form-item
					label="联系电话"
					prop="phone"
				>
					<u--input
						v-model="formData.phone"
						placeholder="请输入您的联系电话"
						border="none"
					/>
				</u-form-item>
			</u--form>
		</view>
		
		<view class="apply_footer">
			<u-button type="primary" @click="applySubmit">提 交</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				formData: {
					name: '',
					phone: ''
				},
				rules: {
					name: {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					phone: {
						type: 'string',
						required: true, 
						message: '请输入手机号',
						trigger: ['change','blur'],
					}
				}
			}
		},
		methods: {
			applySubmit (){
				this.$refs.uForm.validate().then(res => {
					console.log('校验通过');
					
				}).catch(errors => {
					uni.$u.toast('请留下您的联系内容')
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.apply_container{
		padding: 30rpx;
	}
	.apply_form{
		background-color: #fff;
		padding: 30rpx;
	}
	.apply_footer{
		padding: 40rpx 0 0 0;
	}
</style>